<script lang="ts" setup>
import depositTabIcon from '~/assets/icons/deposit-tab-icon.png';
import payTabIcon from '~/assets/icons/pay-tab-icon.png';

const router = useRouter();

const toPromo = () => router.push({ name: RN.PROMO });
</script>

<template>
  <div v-if="$bp.ltTablet" class="box-mobile" @click="toPromo">
    <div class="m-[0_auto] w-56">
      <img :src="depositTabIcon" class="w-full">
    </div>
    <div class="tip">
      <div class="w-full text-left text-4.5 font-700">
        <span class="text-amber">{{ $t('pisC94cov4bwZU2uErmo') }}</span> 590%
      </div>
      <AButton
        class="ant-cover__Button-3d-primary !max-w-30"
        type="primary" block
      >
        {{ $t('p9zKloGqNTkIgC4asiQrx') }}
      </AButton>
    </div>
  </div>

  <!-- PC端 -->
  <div v-else class="box-pc" @click="toPromo">
    <div class="text-6 font-700">
      <span class="text-amber">{{ $t('pisC94cov4bwZU2uErmo') }}</span> 590%
    </div>
    <div class="w-50">
      <img :src="payTabIcon" class="w-full">
    </div>
    <div class="w-50">
      <img :src="depositTabIcon" class="w-full">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box-mobile {
  --uno: 'text-center mt-6.5 pt-3 rounded-2';
  background: var(--sys-layer-a, #131416);
  .tip {
    --uno: 'flex justify-between items-center mt-3 px-2.5 pt-6 pb-6 gap-8 rounded-2';
    background-image: url('../../imgs/bar-bg2.png');
    background-size: 100% 100%;
  }
}
.box-pc {
  --uno: 'mt-10 flex justify-between items-center px-12.5 py-8.5 leading-normal cursor-pointer';
  background-image: url('../../imgs/bar-bg.png');
  background-size: 100% 100%;
}
</style>
